// 商品详情组件
Vue.component('product-detail', {
    template: '#product-detail',
    props: ['product']
});

// 商品列表组件
Vue.component('product-list', {
    template: '#product-list',
    props: ['products'],
    methods: {
        goToDetailPage(product) {
            this.$router.push({ name: 'product-detail', params: { productId: product.id } });
        }
    }
});

// 商品列表页面模板
const productListTemplate = `
    <div>
        <h1>商品列表</h1>
        <div class="product-item" v-for="product in products" :key="product.id">
            <img :src="product.image" :alt="product.name">
            <h3>{{ product.name }}</h3>
            <p>{{ product.description }}</p>
            <button @click="goToDetailPage(product)">查看详情</button>
        </div>
    </div>
`;

// 商品详情页面模板
const productDetailTemplate = `
    <div>
        <h1>{{ product.name }}</h1>
        <img :src="product.image" :alt="product.name">
        <p>{{ product.description }}</p>
        <p>价格: {{ product.price }}</p>
        <p>评分: {{ product.rating }}</p>
        <button @click="$router.push('/')">返回列表</button>
    </div>
`;

// 创建Vue实例并配置路由
const router = new VueRouter({
    routes: [
        {
            path: '/',
            name: 'product-list',
            component: {
                template: productListTemplate,
                data() {
                    return {
                        products: [
                            { id: 1, name: '人间失格', image: 'products/image1.jpg', description: '这是人间失格的描述', price: 50, rating: 4.5 },
                            { id: 2, name: '城南旧事', image: 'products/image2.jpg', description: '这是城南旧事的描述', price: 30, rating: 4.7 },
                            { id: 3, name: '朝花夕拾', image: 'products/image3.jpg', description: '这是朝花夕拾的描述', price: 40, rating: 4.6 }
                        ]
                    };
                }
            }
        },
        {
            path: '/product/:productId',
            name: 'product-detail',
            component: {
                template: productDetailTemplate,
                data() {
                    return {
                        product: {}
                    };
                },
                created() {
                    // 根据商品ID获取商品详情数据
                    const productId = this.$route.params.productId;
                    this.product = this.getProductById(productId);
                },
                methods: {
                    getProductById(id) {
                        const products = [
                            { id: 1, name: '人间失格', image: 'products/image1.jpg', description: '这是人间失格的描述', price: 50, rating: 4.5 },
                            { id: 2, name: '城南旧事', image: 'products/image2.jpg', description: '这是城南旧事的描述', price: 30, rating: 4.7 },
                            { id: 3, name: '朝花夕拾', image: 'products/image3.jpg', description: '这是朝花夕拾的描述', price: 40, rating: 4.6 }
                        ];
                        return products.find(product => product.id == id);
                    }
                }
            }
        }
    ]
});

// 创建Vue实例并挂载
new Vue({
    el: '#app',
    router
});
